<template>

  <el-row style="height: 60%;">
    <el-col :span="12">
      <el-card shadow="never" header="代码" class="code-content">
        <div slot="header" >
          <span>代码</span>
          <el-button style="float: right; padding: 3px 0" type="text">复制代码</el-button>
        </div>
        <el-scrollbar class="code-template-scrollbar" style="height:500px;">
          <template v-for="item in codeHtml">
            <span class="code-line">{{item}}</span><br>
          </template>
        </el-scrollbar>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="never" header="效果">
        <el-scrollbar class="code-template-scrollbar" style="height:500px;">
          <div v-for="item in columnData" class="mt-10">
            <!--输入框-->
            <template v-if="item.elementType === 'input'">
              <el-input
                        :placeholder="'请输入'+item.columnComment"
                        :maxlength="item.maxLength || 255"
                        show-word-limit></el-input>
            </template>
            <!--下拉框开始-->
            <template v-if="item.elementType === 'select'">
              <!--url-->
              <template v-if="item.dataSourceType === 'url'">
                <es-select
                  :key="uuid"
                  :url=item.dataSource
                  show-tip
                  :tip-text="'请选择'+item.columnComment"
                > </es-select>
              </template>
              <!--枚举-->
              <template v-if="item.dataSourceType === 'enum-name'">
                <es-select
                  :key="uuid"
                  :enum-name=item.dataSource
                  show-tip
                  :tip-text="'请选择'+item.columnComment"
                > </es-select>
              </template>
              <!--字典-->
              <template v-if="item.dataSourceType === 'dict-name'">
                <es-select
                  :key="uuid"
                  :dict-name=item.dataSource
                  show-tip
                  :tip-text="'请选择'+item.columnComment"
                > </es-select>
              </template>
            </template>
            <!--下拉框结束-->

            <!--复选框开始-->
            <template v-if="item.elementType === 'checkbox'">
              <!--url-->
              <template v-if="item.dataSourceType === 'url'">
                <es-checkbox
                  :key="uuid"
                  v-model="checkboxValue"
                  :url="item.dataSource"
                > </es-checkbox>
              </template>
              <!--枚举-->
              <template v-if="item.dataSourceType === 'enum-name'">
                <es-checkbox
                  :key="uuid"
                  v-model="checkboxValue"
                  :enum-name="item.dataSource"
                > </es-checkbox>
              </template>
              <!--字典-->
              <template v-if="item.dataSourceType === 'dict-name'">
                <es-checkbox
                  :key="uuid"
                  v-model="checkboxValue"
                  :dict-name="item.dataSource"
                > </es-checkbox>
              </template>
            </template>
            <!--复选框结束-->

            <!--下拉树开始-->
            <template v-if="item.elementType === 'tree'">
              <!--url-->
              <template v-if="item.dataSourceType === 'url'">
                <es-tree
                  :key="uuid"
                  v-model="treeValue"
                  :url="item.dataSource"
                > </es-tree>

              </template>
            </template>
            <!--下拉树结束-->

            <!--级联选择器开始-->
            <template v-if="item.elementType === 'cascader'">
              <!--url-->
              <template v-if="item.dataSourceType === 'url'">
                <es-cascader
                  :key="uuid"
                  :url="item.dataSource"
                > </es-cascader >

              </template>
            </template>
            <!--级联选择器结束-->

            <!--图片上传开始-->
            <template v-if="item.elementType === 'uploadImg'">
              <es-upload-img
                :value="imageValue"
              > </es-upload-img>
            </template>
            <!--图片上传结束-->
          </div>
        </el-scrollbar>
      </el-card>
    </el-col>
  </el-row>


</template>

<script>
  export default {
    name: 'codePreview',
    props: {
      uuid: String,
      columnData: Array,
      codeHtml:Array
    },
    data:function () {
      return{
        data:[],
        imageValue:'/static/img/head.jpg',
        checkboxValue:[],
        treeValue:[]
      }
    },
    mounted () {

    },
    watch:{
      uuid(val){
      }
    }
  }
</script>
<style>
  .code-template-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
</style>
<style scoped>
  .code-line {
    display: inline-block;
    color: #409EFF;
    font-size: 15px;
    margin-bottom: 8px;
  }
</style>
